<template>
    <div class="profitStandardSettingHandle">
        <div class="mb20">标准名称：
            <el-input style="width: 200px" v-model="name" :maxlength="20" placeholder="请输入标准名称"></el-input>
        </div>
        <el-tabs type="border-card" class="tabs">
            <el-tab-pane :label="item.label" v-for="(item, index) in totalData" :key="index">
                <ul class="list">
                    <li v-if="item.list.length">
                        <span>比例数值</span>
                        <span>比例符号</span>
                        <span>选择合作标签</span>
                        <span>比例符号</span>
                        <span>比例数值</span>
                        <span>操作</span>
                    </li>
                    <li v-for="(subItem,subIndex) in item.list" :key="subIndex">
                        <el-form :inline="true" :model="subItem" class="demo-form-inline">
                            <el-form-item label="">
                                <el-input size="mini" :disabled="subItem.leftProportionDisabled" style="width: 100px" v-model="subItem.leftProportion" @input="rewriteNum(subItem.leftProportion, index, subIndex, 'leftProportion')"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="">
                                <el-select size="mini" style="width: 100px" v-model="subItem.leftComparisonOperator" placeholder="请选择" @change="comparisonOperatorChange('left',index, subIndex)">
                                    <el-option
                                            v-for="(item,index) in proportionalSymbol"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="subItem.leftComparisonOperatorDisabled.indexOf(item.value) > -1"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select size="mini" style="width: 150px" filterable v-model="subItem.cooperationLabelId" placeholder="请选择合作标签">
                                    <el-option
                                            v-for="item in cooperationLabel[index]"
                                            :key="item.id"
                                            :label="item.labelName"
                                            :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-select size="mini" style="width: 100px" v-model="subItem.rightComparisonOperator" placeholder="请选择" @change="comparisonOperatorChange('right',index, subIndex)">
                                    <el-option
                                            v-for="(item,index) in proportionalSymbol"
                                            :key="index"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="subItem.rightComparisonOperatorDisabled.indexOf(item.value) > -1"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="">
                                <el-input size="mini" :disabled="subItem.rightProportionDisabled" style="width: 100px" v-model="subItem.rightProportion" @input="rewriteNum(subItem.rightProportion, index, subIndex, 'rightProportion')"></el-input>
                                %
                            </el-form-item>
                            <el-form-item label="">
                                <el-button type="text" @click="del(index, subIndex)">删除</el-button>
                            </el-form-item>
                        </el-form>
                    </li>
                </ul>
                <div class="tac mt20">
                    <el-button type="primary" @click="add(index)">添加<i class="el-icon-plus ml10"></i></el-button>
                </div>
            </el-tab-pane>
        </el-tabs>

        <div class="mt50 mb20 tac tabs">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button type="primary" class="mr30" @click="returnList">取消</el-button>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import api from '@/api/apiPath'

    export default {
        name: 'profitStandardSettingHandle',
        data() {
            return {
                name: '',
                proportionalSymbol: [
                    {
                        label: "<=",
                        value: "0"
                    },
                    {
                        label: "<",
                        value: "1"
                    },
                    {
                        label: "=",
                        value: "2"
                    },
                    {
                        label: "无",
                        value: "5"
                    },
                ],
                cooperationLabel: [[], []],
                totalData: [
                    {
                        label: '普通',
                        list: [
                            {
                                labelType: 1,
                                leftProportion: "",
                                leftProportionDisabled: false,
                                leftComparisonOperator: "",
                                leftComparisonOperatorDisabled: [],
                                rightProportion: "",
                                rightProportionDisabled: false,
                                rightComparisonOperator: "",
                                rightComparisonOperatorDisabled: [],
                                cooperationLabelId: "",
                            }
                        ]
                    },
                    {
                        label: '包销',
                        list: [
                            {
                                labelType: 2,
                                leftProportion: "",
                                leftProportionDisabled: false,
                                leftComparisonOperator: "",
                                leftComparisonOperatorDisabled: [],
                                rightProportion: "",
                                rightProportionDisabled: false,
                                rightComparisonOperator: "",
                                rightComparisonOperatorDisabled: [],
                                cooperationLabelId: "",
                            }
                        ]
                    }
                ]
            }
        },
        created() {

        },
        mounted() {
            this.cooperationLabelSearch();
        },
        methods: {
            del(index, subIndex) {
                //const _this = this;

                if (this.totalData[index].list.length <= 1) {
                    this.$message.warning('至少保留一条标准！');
                    return false
                }

                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.totalData[index].list.splice(subIndex, 1)
                }).catch(() => {

                });
            },
            save() {
                let params = {
                    name: this.name,
                    details: []
                };
                let tempMap = {};
                if (!this.name) {
                    this.$message.warning('标准名称不能为空！');
                    return false;
                }
                for (let index = 0; index < this.totalData.length; index++) {
                    let item = this.totalData[index];
                    if (item.list.length) {
                        if (this.judgeIsLegal(index)) {
                            item.list.forEach((subItem) => {
                                const tempParam = {
                                    "labelType": subItem.labelType,
                                    "leftProportion": subItem.leftComparisonOperator === '5' ? '' : subItem.leftProportion,
                                    "leftComparisonOperator": subItem.leftComparisonOperator,
                                    "rightProportion": subItem.rightComparisonOperator === '5' ? '' : subItem.rightProportion,
                                    "rightComparisonOperator": subItem.rightComparisonOperator,
                                    "cooperationLabelId": subItem.cooperationLabelId
                                }
                                params.details.push(tempParam);
                                if (tempMap[subItem.cooperationLabelId]) {
                                    tempMap[subItem.cooperationLabelId].push(tempParam)
                                } else {
                                    tempMap[subItem.cooperationLabelId] = [tempParam]
                                }
                            })
                        } else {
                            return false
                        }
                    } else {
                        this.$message.warning(item.label + '标准设置不能为空！');
                        return false;
                    }
                }
                console.log(tempMap);


                this.$confirm('确定要保存吗?', '提示', {
                    confirmButtonText: '保存',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.axios.post(api.profitStandardSettingAdd, params).then((res) => {
                        if (res.data.code === 200) {
                            this.$message.success('保存成功');
                            this.returnList();
                        }
                    })
                }).catch(() => {

                });
            },
            returnList() {
                this.$router.push({path: "./profitStandardSetting"})
            },
            comparisonOperatorChange(field, index, subIndex) {
                let reverseField = {
                    left: 'right',
                    right: 'left'
                };
                let arrMap = {
                    "0": ['0', '2'],
                    "1": ['2'],
                    "2": ['0', '1', '2'],
                    "5": [],
                };
                let current = this.totalData[index].list[subIndex];
                let currentComparisonOperator = current[field + 'ComparisonOperator']
                this.totalData[index].list[subIndex][field + 'ProportionDisabled'] = currentComparisonOperator === '5';
                this.totalData[index].list[subIndex][reverseField[field] + 'ComparisonOperatorDisabled'] = arrMap[currentComparisonOperator]
                // if(arrMap[currentComparisonOperator].indexOf(this.totalData[index].list[subIndex][reverseField[field] + 'ComparisonOperator']) > -1){
                //     this.totalData[index].list[subIndex][reverseField[field] + 'ComparisonOperator'] = ""
                // }
            },
            rewriteNum(value, index, subIndex, field) {
                value = value.replace(/[^\d.]/g, '');
                value = value.replace(/\.{2,}/g, ".");
                value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
                if (value.indexOf('.') < 0 && value != '') {
                    value = parseInt(value);
                }
                if (+value > 100) {
                    let valueString = value + ""
                    value = valueString.slice(0, valueString.length - 1)
                }
                this.totalData[index].list[subIndex][field] = value
            },
            judgeIsLegal(index) {
                let lastList = this.totalData[index].list;
                let current = lastList[lastList.length - 1];
                if (!current) {
                    return true
                }
                console.log(lastList);
                if (!current.cooperationLabelId) {
                    this.$message.warning('合作标签不能为空！');
                    return false;
                }
                if (!current.leftComparisonOperator) {
                    this.$message.warning('左侧比例符号不能为空！');
                    return false;
                }
                if (current.leftComparisonOperator !== '5' && !current.leftProportion) {
                    this.$message.warning('左侧比例数值不能为空！');
                    return false;
                }
                if (!current.rightComparisonOperator) {
                    this.$message.warning('右侧比例符号不能为空！');
                    return false;
                }
                if (current.rightComparisonOperator !== '5' && !current.rightProportion) {
                    this.$message.warning('右侧比例数值不能为空！');
                    return false;
                }
                if (current.leftComparisonOperator !== '5' && current.rightComparisonOperator !== '5') {
                    if (current.leftProportion >= current.rightProportion) {
                        this.$message.warning('左侧比例数值必须小于右侧比例数值！');
                        return false
                    }
                }
                return true;
            },
            add(index) {
                if (this.judgeIsLegal(index)) {
                    this.totalData[index].list.push({
                        labelType: index + 1,
                        leftProportion: "",
                        leftProportionDisabled: false,
                        leftComparisonOperator: "",
                        leftComparisonOperatorDisabled: [],
                        rightProportion: "",
                        rightProportionDisabled: false,
                        rightComparisonOperator: "",
                        rightComparisonOperatorDisabled: [],
                        cooperationLabelId: "",
                    })
                }
            },
            cooperationLabelSearch() {
                this.axios.post(api.cooperationLabelSearch, {}).then((res) => {
                    let data = res.data.data;
                    data.forEach((item) => {
                        this.cooperationLabel[item.labelType - 1].push(item)
                    })
                })
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
    .profitStandardSettingHandle {
        .tabs {
            width: 800px;
        }
        .list {
            padding: 0;
            li:first-child {
                display: flex;
                margin-bottom: 20px;
                span {
                    text-align: center;
                    flex: 1;
                }
            }
            .demo-form-inline {
                display: flex;
                .el-form-item {
                    margin-right: 0;
                    text-align: center;
                    flex: 1;
                }
            }
        }
    }
</style>
